<template>
    <el-upload
        action=""
        :accept="fileType"
        list-type="picture-card"
        :show-file-list="false"
        :auto-upload="false"
        :multiple="true"
        :on-change="onUploadChange">
        <div class="upload_btn">
            <el-icon class="plus_icon"><Plus /></el-icon>
            <div class="btn_text">上传图片</div>
        </div>
    </el-upload>
</template>

<script setup>
import request from '@/request';
import { Plus } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

const props = defineProps({
    url: { type: String }
});
const emit = defineEmits(['change']);
const fileType = '.jpg,.jpeg,.png';

const onUploadChange = async file => {
    const suffix = file.raw.name.split('.').pop().toLowerCase();
    if (!fileType.includes(suffix)) {
        ElMessage.error('请上传jpg、png、jpeg格式的图片');
        return;
    }
    if (file.size / 1024 / 1024 > 10) {
        ElMessage.error('图片大小应小于10M');
        return;
    }
    const params = new FormData();
    params.append('file', file.raw);
    const { data } = await request('fileUploadServ', params);
    emit('change', data.url);
};
</script>
<style lang="scss" scoped>
:deep(.el-upload) {
    width: 120px;
    height: 120px;
    background: #f8f8f8;
    border-radius: 4px;
}
.upload_btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    .plus_icon {
        margin-bottom: 15px;
        font-size: 28px;
        color: #ff6b00;
    }
    .btn_text {
        font-size: 14px;
        line-height: 1;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #969696;
    }
}
</style>
